<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>bbb</title>
    <meta name="description" content="" />
    <meta name="Keywords" content="" />
    <link rel="stylesheet" href="./index.css">
</head>

<body>


    <!-- main 模块 -->
    <div class="container">

        <!-- 核心的滚动区域 -->
        <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.9IeyESTL49nNE_IStayxxQHaDF?w=292&h=145&c=7&r=0&o=5&pid=1.7"
            class="on" alt="">
        <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.Hzt5XaCFCYl0qhrcojhJUwHaDF?w=292&h=145&c=7&r=0&o=5&pid=1.7"
            alt="">
        <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.fSQcvpq5OeOxrJiaN_mgJgHaC0?w=292&h=133&c=7&r=0&o=5&pid=1.7"
            alt="">
        <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.Hi0FFr_nGwsXsB62NoJjEwHaDJ?w=328&h=149&c=7&r=0&o=5&pid=1.7"
            alt="">

        <!-- 左侧按钮 -->
        <div class="left">《</div>
        <!-- 右侧按钮 -->
        <div class="right">》</div>

        <!-- 小圆圈 -->
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

    </div>
    <script type="text/javascript">
        //1、找到container下的所有img标签,li标签,左右按钮
        var aImgs = document.querySelectorAll('.container img');
        var aLis = document.querySelectorAll('.container li');
        var btnLeft = document.querySelector('.container .left');
        var btnRight = document.querySelector('.container .right');
        //点击事件
        //点击按钮图片切换
        var index = 0;        //当前图片下标
        var lastIndex = 0;
        btnRight.onclick = function () {
            //记录上一张图片的下标
            lastIndex = index;
            //清除上一张图片的样式
            aImgs[lastIndex].className = '';
            aLis[lastIndex].className = '';
            index++;
            index %= aImgs.length;    //实现周期性变化
            //设置当前图片的样式
            aImgs[index].className = 'on';
            aLis[index].className = 'active';
        }
        //左边按钮类似
        btnLeft.onclick = function () {
            //记录上一张图片的下标
            lastIndex = index;
            //清除上一张图片的样式
            aImgs[lastIndex].className = '';
            aLis[lastIndex].className = '';
            index--;
            if (index < 0) {
                index = aImgs.length - 1;
            }
            //设置当前图片的样式
            aImgs[index].className = 'on';
            aLis[index].className = 'active';
        }
    </script>
</body>

</html>